<template>
    <!-- 图片详情 -->
    <div class="photoinfo_all">
        <p>{{photoInfo.title}}</p>
        <div class="phototime">
            <span>发表时间:{{photoInfo.add_time | dateFormat}}</span>
            <span>点击:{{photoInfo.click}}次</span>
        </div>
        <hr>
        <!-- 缩略图 -->
        <div class="suoluetu">
            <vue-preview :slides="list" @close="handleClose"></vue-preview>
        </div>
        <div class="photoContent" v-html="photoInfo.content"></div>
        <!-- 发表组件 -->
        <comment :id="this.id"></comment>
    </div>
</template>

<script>
import comments from "./../comments/comments.vue"
export default {
    data(){
        return{
           photoInfo:{},//用于 存储 获取的 数据
           id:this.$route.params.id,
           list:[]  //用于 存储  缩略图 的详细信息
        }
    },
    created() {
        this.getPhotoInfo(),
        this.getSlt()
    },
    methods: {
        getPhotoInfo(){
            this.$http.get("api/getimageInfo/" + this.$route.params.id).then(result=>{
                if(result.body.status==0){
                    this.photoInfo = result.body.message[0]
                }
            })
        },
        getSlt(){
            this.$http.get("api/getthumimages/" + this.id).then(result=>{
                if(result.body.status==0){
                    result.body.message.forEach(item => {
                        item.w=600
                        item.h=400
                        item.msrc=item.src
                    })
                    this.list=result.body.message
                    console.log(result.body.message)
                }
            })
        },
        handleClose () {
        console.log('close event')
      }
    },
    components:{
        comment:comments
    }
}
</script>

<style lang="less">
    .photoinfo_all{
        padding: 0 10px;
        p{
            color: #2c87e2;
            font-size: 16px;
            text-align: center;
            line-height: 50px;
            font-weight: 700;
        }
        .phototime{
            font-size: 13px;
            display: flex;
            color: #aaa;
            justify-content: space-between;
        }
        .suoluetu{
            display: flex;
            >div{
                width: 100%;
                .my-gallery{
                    display: flex;
                    flex-wrap: wrap;
                    figure{
                        margin: 0;
                        padding: 0;
                        width: 30%;
                         margin-left: 3%;
                        img{
                            width: 100%;
                        }
                    }
                }
            }
        }
    }
</style>
